<template>
  <view class="section">
    <template v-if="sectionLevel == 1">
      <SectionItem
        v-for="(item, index) in sectionList"
        :key="index"
        :item="item"
        :position="courseCurrentPlayPosition[0] === item.id"
        :query-id="queryId || courseId"
        :classId="classId"
        :courseBuy="courseBuy"
        :detailsInfo="detailsInfo"
      ></SectionItem>
    </template>
    <!-- 二级 -->
    <edu-collapse ref="collapse" :head-style="headStyle" v-else-if="sectionLevel == 2">
      <edu-collapse-item
        @change="handleSectionChange(2, index)"
        v-for="(item, index) in sectionList"
        :index="item.id"
        :key="index"
      >
        <block slot="title">
          <view
            class="big-title"
            :class="{
              active: courseCurrentPlayPosition[0] === item.id,
            }"
            >{{ item.title }}</view
          >
        </block>
        <SectionItem
          v-for="subItem in item.child"
          :key="subItem.id"
          :item="subItem"
          :position="courseCurrentPlayPosition[1] === subItem.id"
          :query-id="queryId || courseId"
          :classId="classId"
          :courseBuy="courseBuy"
          :detailsInfo="detailsInfo"
        ></SectionItem>
      </edu-collapse-item>
    </edu-collapse>
    <!-- 三级 -->
    <edu-collapse ref="collapse" :head-style="headStyle" v-else-if="sectionLevel == 3">
      <edu-collapse-item
        @change="handleSectionChange(2, index)"
        v-for="(item, index) in sectionList"
        :index="item.id"
        :key="index"
      >
        <block slot="title">
          <view
            class="big-title"
            :class="{
              active: courseCurrentPlayPosition[0] === item.id,
            }"
            >{{ item.title }}</view
          >
        </block>
        <edu-collapse ref="collapseChild" :head-style="headStyle">
          <edu-collapse-item
            @change="handleSectionChange(3, index, subIndex)"
            v-for="(subItem, subIndex) in item.child"
            :index="subItem.id"
            :key="subIndex"
          >
            <block slot="title">
              <view
                class="sub-title"
                :class="{
                  active: courseCurrentPlayPosition[1] === subItem.id,
                }"
                >{{ subItem.title }}</view
              >
            </block>
            <SectionItem
              v-for="(grandItem, grandIndex) in subItem.child"
              :key="grandIndex"
              :item="grandItem"
              :position="courseCurrentPlayPosition[2] === grandItem.id"
              :query-id="queryId || courseId"
              :classId="classId"
              :courseBuy="courseBuy"
              :detailsInfo="detailsInfo"
            ></SectionItem>
          </edu-collapse-item>
        </edu-collapse>
      </edu-collapse-item>
    </edu-collapse>
    <edu-empty v-if="$u.test.empty(sectionList)"></edu-empty>
  </view>
</template>

<script>
import SectionItem from './sectionItem.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    SectionItem,
  },
  props: {
    courseId: {
      type: Number,
      default: 0,
    },
    // 跳转到播放页时需要，点播和班级id不一样
    queryId: {
      type: Number,
      default: 0,
    },
    // 班级课
    classId: {
      type: Number,
      default: 0,
    },
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      sectionList: [],
      sectionLevel: 0,
      courseBuy: 0, // 课程购买状态
    }
  },
  mounted() {
    this.getCourseCatalog()
    uni.$on('sectionItemUpdate', (data) => {
      if (data.course_type == 1) {
        this.$u.throttle(() => {
          this.getCourseCatalog()
        }, 1000)
      }
    })
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      courseCurrentPlayPosition: 'course/getCurrentPlayPosition',
    }),
    headStyle() {
      return {
        padding: '40rpx 0',
        borderBottom: '1rpx solid #F7F7F7',
      }
    },
  },
  methods: {
    // 章节目录
    getCourseCatalog() {
      // this.sectionList = []
      // this.sectionLevel = 0
      this.$edu.api
        .getCourseSection(this.courseId, 0, {
          count: 999,
          page: 1,
          class_id: this.queryId,
        })
        .then((res) => {
          const { data } = res
          this.sectionList = data.section_info.data
          this.sectionLevel = data.section_level
          this.courseBuy = data.course_buy_status
        })
    },
    // 目录子集列表内容
    handleSectionChange(type, index, childIndex) {
      if (this.$u.test.empty(this.sectionList[index].child) && type === 2) {
        this.$edu.api
          .getCourseSection(this.courseId, this.sectionList[index].id, {
            count: 999,
            page: 1,
            class_id: this.queryId,
          })
          .then((res) => {
            const { data } = res
            this.$set(this.sectionList[index], 'child', data.section_info.data)
            this.$refs.collapse.init()
            this.$emit('success')
          })
      } else if (type === 3) {
        if (this.$u.test.empty(this.sectionList[index].child[childIndex].child)) {
          this.$edu.api
            .getCourseSection(this.courseId, this.sectionList[index].child[childIndex].id, {
              count: 999,
              page: 1,
              class_id: this.queryId,
            })
            .then((res) => {
              const { data } = res
              this.$set(this.sectionList[index].child[childIndex], 'child', data.section_info.data)
              this.$refs.collapseChild[index].init()
              this.$emit('success')
            })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.section {
  .big-title {
    margin-left: 30rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #303133;
    &.active {
      @include text-color();
    }
  }
  .sub-title {
    margin-left: 56rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #303133;
    &.active {
      @include text-color();
    }
  }
}
</style>
